<template>
<div class="newsinfo-container">
  <!-- 大标题 -->
  <h3 class="title">{{ newsinfo.title }}</h3>
  <!-- 子标题 -->
  <p class="subtitle">
    <span>发表时间：{{ newsinfo.add_time | dateFormat }}</span>
    <span>点击：{{ newsinfo.click }}次</span>
  </p>
  <hr>
  <!-- 内容区域 -->
  <div class="content" v-html="newsinfo.content"></div>
  <!-- 评论子组件 -->
  <comment-box :id="this.id"></comment-box>
</div>
</template>

           
<script>
import {
  getNewsInfo
} from '../../api/index.js'
import comment from './component.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      newsinfo: {} // 新闻对象
    }
  },
  created() {
    getNewsInfo(this.id).then(res => {
      console.log(res)
      if (res.status == 0) {
        this.newsinfo = res.message[0]
      }
    })
  },

  // 注册子组件
  components: {
    "comment-box": comment
  }
  // 如果添加了scoped 不能直接修改子组件以及使用v-html渲染出来的内容模式
  // vue-loader提供了深度作用选择器可以解决这个问题
  // 如果样式是使用的css语法 在父子组件样式之间使用 >>>
  // 如果是sass 或者less 则将 >>> 换成 /deep/
}
</script>

<style lang="scss" scoped>
.newsinfo-container {
  padding: 0 4px;
  .title {
    font-size: 16px;
    text-align: center;
    margin: 15px 0;
    color: red;
  }
  .subtitle {
    font-size: 13px;
    color: #226aff;
    display: flex;
    justify-content: space-between;
  }
  .content {
    /deep/ img {
      width: 100%;
    }
  }
}
</style>
